<template>
    <div>
        <div>
            <div class="top-div">
                <el-row>
                    <el-col :span="20" >
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-col :span="6">
                                <el-form-item label="收货人:">
                                    <el-input :clearable="true" v-model="form.userName" placeholder="收货人姓名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="状态:">
                                    <el-select style="width: 100%;" v-model="form.state" placeholder="请选择">
<!--                                        0未确认, 1 制作中  2 已经发货待确认,3确认收货/等待评价,4已经评价/交易完成  5卖家取消,6买家取消-->
                                        <el-option label="全部"  value=""></el-option>
                                        <el-option label="待确认" value="0"></el-option>
                                        <el-option label="制作中" value="1"></el-option>
                                        <el-option label="已发货待确认" value="2"></el-option>
                                        <el-option label="已确认收货等待评价," value="3"></el-option>
                                        <el-option label="已经评价交易完成" value="4"></el-option>
                                        <el-option label="卖家取消" value="5"></el-option>
                                     
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" >
                                <el-form-item label="时间:">
                                    <el-date-picker
                                            v-model="searchTime"
                                            type="daterange"
                                            align="right"
                                            format="yyyy 年 MM 月 dd 日"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            unlink-panels
                                            :clearable="true"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            :picker-options="pickerOptions"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-col>
                    <el-col :span="2" >
                        <el-button type="warning"  icon="el-icon-search" @click="query">筛 选</el-button>
                    </el-col>
                    <el-col :span="2" >
                        <el-button v-if="$store.state.authList.indexOf('index:order:send')!=-1" type="primary"  icon="el-icon-position" @click="oneClickShipping">一键发货</el-button>
                    </el-col>

                </el-row>
            </div>
            <div>
                <el-table
                        :data="orderDate"
                        border
                        style="width: 100%; height:calc( 100vh - 240px )">
                    <el-table-column
                            align="center"
                            prop="userName"
                            label="收货人">
                    </el-table-column>
                    <el-table-column
                            prop="userIphone"
                            label="收货人号码">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="收货地址">
                    </el-table-column>
                    <el-table-column
                            prop="addressInfo"
                            label="详细地址">
                    </el-table-column>
                    <el-table-column
                            label="状态">
<!--                 0未确认, 1 制作中  2 已经发货待确认,3确认收货/等待评价,4已经评价/交易完成  5卖家取消,6买家取消-->
                        <template slot-scope="scope">
                            <span v-if="scope.row.state==0">未确认</span>
                            <span v-if="scope.row.state==1">已发货待确认</span>
                            <span v-if="scope.row.state==2">已收货等待评价</span>
                            <span v-if="scope.row.state==3">已评价交易完成</span>
                            <span v-if="scope.row.state==4">卖家取消</span>
                            <span v-if="scope.row.state==5">买家取消</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="价格">
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            label="数量">
                    </el-table-column>
                    <el-table-column
                            label=总价>
                        <template slot-scope="scope">
                            <span>{{scope.row.price*scope.row.number}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="distributeTime"
                            label="送达时间">
                    </el-table-column>
                    <el-table-column
                            prop="createDate"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="hasVip"
                            label="是否会员">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="$store.state.authList.indexOf('index:order:update')!=-1" @click="handleEdite(scope.row)" type="text" size="small">查看修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="background-color: white">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[15, 20, 25, 30]"
                            :page-size="size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <order-form ref="mform"  @query="query()" :visible.sync="dialogVisible"></order-form>
    </div>
</template>

<script>
    import ordersApi from "../../api/ordersApi";
    import OrderForm from "./orderForm";
    import util from "../../util/util";

    export default {
        name: "index",
        components: {OrderForm},
        data() {
            return {
                dialogVisible:false,
                page:1,
                searchTime:[],
                orderDate: [],
                size:15,
                selectValue:[],
                total: 0,
                pickerOptions: {
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date().getFullYear(), 0);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setMonth(start.getMonth() - 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                form: {
                    queryDate: "",
                    createDate: "",
                    userName: "",
                    state:""
                }


            }
        },
        mounted() {
            this.query()
        },
        methods:{
            oneClickShipping(){
                ordersApi.oneClickShipping().then(res=>{
                    this.query()
                })
            },
            handleEdite(item){
                this.$refs.mform.open(item)
            },
            async handledelete(id){
               if( await  util.deleteConfirm("是否确认取消订单")){
                   ordersApi.update({
                       id:id,
                       state: 5
                   }).then(res=>{
                       this.query()
                   })
               }
            },
            query(){
                if (this.form.userName == "")
                    delete this.form.userName
                if (this.searchTime == null) {
                    delete this.form.createDate
                    delete this.form.queryDate
                } else {
                    this.form.createDate = this.searchTime[0]
                    this.form.queryDate = this.searchTime[1]
                }
                ordersApi.query(this.form,this.page,this.size).then(res=>{
                    this.orderDate=res.data.rows
                    this.total=res.data.total
                })
            },
            handleSelectionChange(val) {
                this.selectValue = []
                val.forEach(item => {
                    this.selectValue.push(item.id)
                })
            },

            // 尺寸大小改变
            handleSizeChange(newSize) {
                this.size = newSize;
                this.query();
            },
            // 当前页码的改变
            handleCurrentChange(newPage) {
                this.page = newPage;
                this.query();
            }
        }
    }
</script>

<style scoped>

</style>